
import React from 'react'
import {Card,Row,Col,Button,Icon,Form,Tabs,Upload,message} from 'antd';
import PureRenderMixin from 'react-addons-pure-render-mixin'
import {Link} from 'react-router-dom'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';
import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
const _mm = new MMUtile();
const _user = new User();


import './style.css'
const TabPane = Tabs.TabPane;


const FormItem = Form.Item;

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('您只能上传类型为jpg的图片!');
  }
  const isLt2M = file.size / 1024 / 1024 < 0.5;
  if (!isLt2M) {
    message.error('图片太大了，要小于500kb!');
  }
  return isJPG && isLt2M;
}

const imgarr1 = [require('img/1-02.jpg'),require('img/2-02.jpg'),require('img/3-02.jpg'),require('img/4-02.jpg')];
const imgarr2 = [require('img/5-02.jpg'),require('img/6-02.jpg'),require('img/8-02.jpg'),require('img/9-02.jpg')];
class UpdateHeadImg extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state={
			items:[{'name':'修改头像','actived':true,'link':'','icon':'smile-o'},
			{'name':'基本资料','actived':false,'link':'/user-base','icon':'solution'},
			{'name':'详细资料','actived':false,'link':'/user-link','icon':'link'},
			{'name':'设置昵称','actived':false,'link':'/user-nick','icon':'tool'}],
			imageUrl:_mm.getStorage('headimgbase64')?_mm.getStorage('headimgbase64'):'',
			headerurl:''
		}
	}
	componentDidMount(){
		
	}
	componentDidUpdate(){
  	_mm.setStorage('headimgbase64',this.state.imageUrl);
	}
	handleSubmit(e){
	  e.preventDefault();
	  if(!_mm.getStorage('headimgbase64')){
	  	message.error('请选择头像');
	  	return ;
	  }
		_user.savetHeader({
			'headerurl':_mm.getStorage('headimgbase64')
		}).then((res)=>{
			message.success('头像设置成功');
			
		},(errMsg)=>{
			_mm.errorTips(errMsg);
		})
	  
	}
	handleTabChange(e) {
	  //console.log(e)
	}

	
	handleChange(info){
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl }));
    }
  }
  chooseImg(e,index){
  	$('.graybg').removeClass('actived');
  	$(e.target).siblings('.graybg').addClass('actived');
  	
  	_mm.setStorage('headimgbase64',$(e.target).attr('src'));
  }

	render(){
		const imageUrl = this.state.imageUrl;
		return(
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>
			        <Card title="修改头像" bordered={false}>
			        	<Tabs defaultActiveKey="1" onChange={this.handleTabChange.bind(this)}>
							    <TabPane tab="自定义头像" key="1">
										<Upload
							        className="avatar-uploader"
							        name="header"
							        showUploadList={false}
							        action="user/updateHeader.act"
							        beforeUpload={beforeUpload}
							        onChange={this.handleChange.bind(this)}
							      >
							        {
							          imageUrl ?
							            <div><img src={imageUrl} alt="" className="avatar" /><Icon style={{position:' absolute',top: '120px'}} type="plus" className="avatar-uploader-trigger" /></div> :
							            <Icon type="plus" className="avatar-uploader-trigger" />
							        }
							      </Upload>
							    </TabPane>
							    <TabPane tab="推荐头像" key="2">
							    	<Row>
							    		<Col span={12}>
												<Row className="margintop10 relativebox">
													{
														imgarr1.map((item,index)=>{
														return	<Col span={6} key={index} >
															<img className="imghead" src={item}  onClick={this.chooseImg.bind(this)}  />
															<div className="graybg"><Icon className="imgchecktip" type="check" /></div>
														</Col>
														})
													}
												</Row>
												<Row className="margintop10">
													<Col span={6}>
														<img className="imghead" src={require('img/5-02.jpg')} onClick={this.chooseImg.bind(this)}  />
														<div className="graybg"><Icon className="imgchecktip" type="check" /></div>
													</Col>
													<Col span={6}>
														<img  className="imghead"src={require('img/6-02.jpg')} onClick={this.chooseImg.bind(this)}  />
														<div className="graybg"><Icon className="imgchecktip" type="check" /></div>
													</Col>
													<Col span={6}>
														<img className="imghead" src={require('img/8-02.jpg')} onClick={this.chooseImg.bind(this)}  />
														<div className="graybg"><Icon className="imgchecktip" type="check" /></div>
													</Col>
													<Col span={6}>
														<img className="imghead" src={require('img/9-02.jpg')} onClick={this.chooseImg.bind(this)}  />
														<div className="graybg"><Icon className="imgchecktip" type="check" /></div>
													</Col>
												</Row>
							    		</Col>
							    	</Row>

					          <Button
					            type="primary"
					            onClick={this.handleSubmit.bind(this)}
					          >
					            提交
					          </Button>
							    </TabPane>
							  </Tabs>
			        </Card>
		      </Col>
				</Row>
			</div>
		)
	}
}

export default UpdateHeadImg;